SVG Charting Libraries


We're limiting the options presented here specifically to SVG charts. I think SVG is an excellent way to go for charts because:

In general, I consider SVG as the best choice for charts, but it's not the only option. There are tools to create flat raster graphics out of chart data. There are <canvas> chart options. You could even make a basic chart out of HTML elements.

Early Considerations

When picking a library, there are a bunch of aspects to consider. A lot of this is fairly obvious. I mostly want you to remember that there are a lot of considerations so it's worth looking at a variety of solutions.

There is a lot to think about!

The List!

It's very likely incomplete. If there are SVG-outputting charting libraries that I missed, drop 'em in the comments!

I'm not going to leave a bunch of commentary on each one. The list of considerations is so deep and variable, it's really up to you to check these out and make a choice. I'm going to snap some screenshots here to showcase some things each has to offer, as well a live demo (if I can find one). This doesn't comprehensively show what each is capable of, it's just a taste.

AMCHARTS

amcharts

See the Pen Using SVG Filters with amCharts by amCharts ( @amcharts ) on CodePen .

HIGHCHARTS

highcharts

See the Pen Highchart Javascript Integration by Benjamin Cassinat ( @benftwc ) on CodePen .

ZINGCHART

zingchart

FUSIONCHARTS

fusioncharts

See the Pen Rad Charts Using Fusion Charts by Chris Vasquez ( @cvasquez ) on CodePen .

GOOGLE CHARTS

googlecharts

See the Pen Toggle series visibility in a Google Chart by Geoff ( @gapple ) on CodePen .

PLOTLY

plotly

See the Pen Responsive Fluid Layout example using Plotly JS by plotly ( @plotly ) on CodePen .

XCHARTS

xcharts

See the Pen XCharts a D3-based library by Sten Hougaard ( @netsi1964 ) on CodePen .

MORRIS.JS

morrisjs

See the Pen Morris.js charts – simple examples by Cioban Andrei ( @andreic ) on CodePen .

UVCHARTS

uvcharts

CONTOUR

contour

CHARTIST

chartist

See the Pen Working with Chartist and Animations by Sarah Drasner ( @sdras ) on CodePen .

N3-CHARTS

n3-charts

See the Pen n3-Charts by Jim Gibbs ( @jimgibbs ) on CodePen .

EMBER CHARTS

ember-charts

REACT SVG CHART

chartjs

Options That Use < canvas>

There are a good number of options that specifically output to <canvas>, like Chart.js :

I'm far more into <svg>, but if you have a good reason to go for canvas, here's some others: